<template>
  <div id="app" style="margin-top:20px;padding-left;20px;margin-left:20px">
    <div>
      <el-form :inline="true">
        <el-form-item label="分类名字">
          <el-input v-model="lisetquery.MenuName" style="width:100px" />
        </el-form-item>

        <el-form-item label="分类层级">
          <el-input v-model="lisetquery.depth" style="width:100px" />
        </el-form-item>

        <el-button @click="search">搜索</el-button>
      </el-form>
    </div>
    <div>
      <el-row>
        <el-button type="primary" @click="AddCategory">添加</el-button>
      </el-row>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="menuName"
        label="分类名字"
        width="180"
      />
      <el-table-column
        prop="creationTime"
        label="创建时间"
        width="180"
      />
      <el-table-column
        prop="depth"
        label="层级"
        width="180"
      />
      <el-table-column
        prop="parentName"
        label="父节点"
        width="180"
      />

      <el-table-column
        label="操作"
        width="180"
      >
        <template slot-scope="scope">
          <el-button type="success" @click="UpdateCategory(scope)">修改</el-button>
          <el-button type="danger" @click="deleterow(scope)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      :current-page="lisetquery.pageIndex"
      :page-sizes="[20, 40, 60, 100]"
      :page-size="lisetquery.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="lisetquery.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <AddCategory ref="addDialog" />
  </div>
</template>

<script>
import * as menu from '@/api/menu'
import AddCategory from './components/AddMenu.vue'
export default {
    name: 'Category',
    components: { AddCategory },
    data() {
        return {
            tableData: [],
            lisetquery: {
              totalCount: 0,
              pageIndex: 1,
              pageSize: 20
            }
        }
    },
    async created() {
     await this.page()
    },
    methods: {
        AddCategory() {
          this.$refs.addDialog.load()
          this.$refs.addDialog.dialogVisible = true
        },
         UpdateCategory(obj) {
           this.$refs.addDialog.load()
           this.$refs.addDialog.dialogVisible = true
           this.$refs.addDialog.ruleForm = obj.row
         },
        deleterow(scope) {
            menu.deletemenu(scope.row.id).then(t => {
              this.page()
            })
        }, search() {
          this.page()
        }, handleSizeChange(obj) {
           this.lisetquery.pageSize = obj
           this.page()
        }, handleCurrentChange(index) {
          this.lisetquery.pageIndex = index
          this.page()
        }, page() {
        menu.page(this.lisetquery).then(res => {
            this.tableData = res.items
            this.lisetquery.totalCount = res.totalCount
          })
        }
    }
}
</script>
